JavaScriptã®'this'ããŒã¯ãŒããçè§£ããããã®å æ¬çã¬ã€ããã³ã³ããã¹ãã®åãæ¿ããã¢ããŒé¢æ°ãã°ããŒãã«ãªéçºè åãã®å®çšäŸã解説ããŸãã
JavaScriptã®'this'ãã€ã³ãã£ã³ã°ïŒã³ã³ããã¹ãåãæ¿ããšã¢ããŒé¢æ°ã®æåããã¹ã¿ãŒãã
JavaScriptã«ãããthisããŒã¯ãŒãã¯ã匷åã§ãããªãããã°ãã°æ··ä¹±ãæãæŠå¿µã§ããããã¯é¢æ°ã®å®è¡ã³ã³ããã¹ããåç
§ãããã®é¢æ°ãã©ã®ãªããžã§ã¯ãäžã§åäœããŠããããæ±ºå®ããŸããthisã®æåãçè§£ããããšã¯ãç¹ã«è€éãªã¢ããªã±ãŒã·ã§ã³ã«ãããŠãæ£ç¢ºã§ä¿å®æ§ã®é«ãJavaScriptã³ãŒããæžãããã«äžå¯æ¬ ã§ãããã®ã¬ã€ãã¯ãthisã®æ§ã
ãªã³ã³ããã¹ãããã®æäœæ¹æ³ããããŠã¢ããŒé¢æ°ã®ãŠããŒã¯ãªæåã«ã€ããŠè§£èª¬ããthisãåããããã説æããããšãç®çãšããŠããŸããäžçäžã®éçºè
ã«é¢é£ããå®çšçãªäŸãæ¢æ±ããããªãã®æåšå°ãæåçèæ¯ã«é¢ããããæç¢ºãã確ä¿ããŸãã
ããã©ã«ãã®'this'ãã€ã³ãã£ã³ã°ãçè§£ãã
JavaScriptã§ã¯ãthisã®å€ã¯é¢æ°ãã©ã®ããã«åŒã³åºããããã«åºã¥ããŠãå®è¡æã«æ±ºå®ãããŸããããã©ã«ãã®ãã€ã³ãã£ã³ã°ã«ãŒã«ã¯ä»¥äžã®éãã§ãïŒ
1. ã°ããŒãã«ã³ã³ããã¹ã
颿°ãã°ããŒãã«ã³ã³ããã¹ãã§ïŒã€ãŸãããªããžã§ã¯ããä»ã®é¢æ°ã®å
éšã§ã¯ãªãïŒåŒã³åºãããå Žåãthisã¯ã°ããŒãã«ãªããžã§ã¯ããåç
§ããŸãããã©ãŠã¶ã§ã¯ãããã¯éåžžwindowãªããžã§ã¯ãã§ããNode.jsã§ã¯ãglobalãªããžã§ã¯ãã§ãã峿 Œã¢ãŒãïŒ"use strict";ïŒã§ã¯ãã°ããŒãã«ã³ã³ããã¹ãã®thisã¯undefinedã«ãªãããšã«æ³šæããŠãã ããã
äŸïŒãã©ãŠã¶ïŒïŒ
function globalFunction() {
console.log(this === window); // true (without strict mode)
console.log(this); // window object (without strict mode)
}
globalFunction();
äŸïŒNode.jsïŒïŒ
function globalFunction() {
console.log(this === global); // true (without strict mode)
console.log(this); // global object (without strict mode)
}
globalFunction();
äŸïŒå³æ Œã¢ãŒãïŒïŒ
"use strict";
function globalFunction() {
console.log(this === undefined); // true
console.log(this); // undefined
}
globalFunction();
2. æé»çãã€ã³ãã£ã³ã°
颿°ããªããžã§ã¯ãã®ã¡ãœãããšããŠåŒã³åºãããå Žåãthisã¯ãã®ã¡ãœãããåŒã³åºãããŠãããªããžã§ã¯ããåç
§ããŸããããã¯ãã³ã³ããã¹ãããªããžã§ã¯ãã«ãã£ãŠæé»çã«æäŸããããããæé»çãã€ã³ãã£ã³ã°ãšããŠç¥ãããŠããŸãã
äŸïŒ
const myObject = {
name: "Example Object",
greet: function() {
console.log("Hello, my name is " + this.name);
}
};
myObject.greet(); // Output: Hello, my name is Example Object
3. æç€ºçãã€ã³ãã£ã³ã°
JavaScriptã¯ãthisã®å€ãæç€ºçã«èšå®ããããã®3ã€ã®ã¡ãœãã â callãapplyãããã³bind â ãæäŸããŠããŸãããããã®ã¡ãœããã¯ãæé»çãã€ã³ãã£ã³ã°ãæãŸããæåãæäŸããªãå Žåã«ãå®è¡ã³ã³ããã¹ããå¶åŸ¡ããããã«äžå¯æ¬ ã§ãã
a. call
callã¡ãœããã䜿çšãããšãæå®ãããthisã®å€ãšåå¥ã«æž¡ãããåŒæ°ã§é¢æ°ãåŒã³åºãããšãã§ããŸãã
æ§æïŒ
function.call(thisArg, arg1, arg2, ...)
äŸïŒ
const person = {
name: "Alice",
greet: function(greeting) {
console.log(greeting + ", my name is " + this.name);
}
};
const anotherPerson = {
name: "Bob"
};
person.greet.call(anotherPerson, "Hello"); // Output: Hello, my name is Bob
b. apply
applyã¡ãœããã¯callã«äŒŒãŠããŸãããåŒæ°ãé
åãšããŠåãåããŸãã
æ§æïŒ
function.apply(thisArg, [argsArray])
äŸïŒ
const person = {
name: "Alice",
greet: function(greeting, punctuation) {
console.log(greeting + ", my name is " + this.name + punctuation);
}
};
const anotherPerson = {
name: "Bob"
};
person.greet.apply(anotherPerson, ["Hello", "!"]); // Output: Hello, my name is Bob!
c. bind
bindã¡ãœããã¯ãåŒã³åºããããšãã«thisããŒã¯ãŒããæäŸãããå€ã«èšå®ãããæ°ãã颿°ãäœæããŸããcallãapplyãšã¯ç°ãªããbindã¯é¢æ°ãããã«ã¯åŒã³åºããŸãããåŸã§åŒã³åºãããšãã§ããæ°ãã颿°ãè¿ããŸãã
æ§æïŒ
function.bind(thisArg, arg1, arg2, ...)
äŸïŒ
const person = {
name: "Alice",
greet: function(greeting) {
console.log(greeting + ", my name is " + this.name);
}
};
const anotherPerson = {
name: "Bob"
};
const greetBob = person.greet.bind(anotherPerson, "Hello");
greetBob(); // Output: Hello, my name is Bob
4. newãã€ã³ãã£ã³ã°
颿°ãnewããŒã¯ãŒãã§åŒã³åºããããšãæ°ãããªããžã§ã¯ããäœæãããthisã¯ãã®æ°ãããªããžã§ã¯ãã«ãã€ã³ããããŸããããã¯äžè¬çã«ãã³ã³ã¹ãã©ã¯ã¿é¢æ°ã§ãªããžã§ã¯ãã®ããããã£ãåæåããããã«äœ¿çšãããŸãã
äŸïŒ
function Person(name) {
this.name = name;
this.greet = function() {
console.log("Hello, my name is " + this.name);
};
}
const alice = new Person("Alice");
alice.greet(); // Output: Hello, my name is Alice
ã¢ããŒé¢æ°ãšã¬ãã·ã«ã«ãª'this'
ECMAScript 6 (ES6)ã§å°å
¥ãããã¢ããŒé¢æ°ïŒ() => {}ïŒã¯ãthisã«é¢ããŠãŠããŒã¯ãªæåãããŸããéåžžã®é¢æ°ãšã¯ç°ãªããã¢ããŒé¢æ°ã¯ç¬èªã®thisãã€ã³ãã£ã³ã°ãæã¡ãŸããã代ããã«ãã¬ãã·ã«ã«ã¹ã³ãŒããšããŠç¥ããããåšå²ã®ã¹ã³ãŒãããthisã®å€ãç¶æ¿ããŸããããã¯ãã¢ããŒé¢æ°å
ã®thisãããããå²ã颿°ãã¹ã³ãŒãã®thisã®å€ãåç
§ããããšãæå³ããŸãã
ãã®thisã®ã¬ãã·ã«ã«ãªãã€ã³ãã£ã³ã°ã¯ãç¹ã«ã³ãŒã«ããã¯ããã¹ãããã颿°ãæ±ãéã«ãåŸæ¥ã®é¢æ°ãã€ã³ãã£ã³ã°ã«é¢é£ããäžè¬çãªèœãšã穎ãé¿ããã³ãŒããç°¡çŽ åããããšãã§ããŸãã
äŸïŒ
const myObject = {
name: "Example Object",
greet: function() {
setTimeout(() => {
console.log("Hello, my name is " + this.name); // this refers to myObject
}, 1000);
}
};
myObject.greet(); // Output (after 1 second): Hello, my name is Example Object
äžèšã®äŸã§ã¯ãsetTimeoutå
ã®ã¢ããŒé¢æ°ã¯ãmyObjectã«ãã€ã³ããããŠããgreet颿°ããthisãç¶æ¿ããŸããã¢ããŒé¢æ°ã®ä»£ããã«éåžžã®é¢æ°ã䜿çšãããå Žåãæ£ããã³ã³ããã¹ãã«ã¢ã¯ã»ã¹ããããã«ã¯ã.bind(this)ã䜿çšããããthisãå¥ã®å€æ°ïŒäŸïŒconst self = this;ïŒã«æ ŒçŽããå¿
èŠãããã§ãããã
éåžžã®é¢æ°ãšã®æ¯èŒïŒ
const myObject = {
name: "Example Object",
greet: function() {
const self = this; // Capture 'this'
setTimeout(function() {
console.log("Hello, my name is " + self.name); // Need to use 'self'
}, 1000);
}
};
myObject.greet();
'this'ãã€ã³ãã£ã³ã°ã«ãŒã«ã®åªå é äœ
è€æ°ã®ãã€ã³ãã£ã³ã°ã«ãŒã«ãé©çšãããå ŽåãJavaScriptã¯thisã®å€ã決å®ããããã«ç¹å®ã®åªå
é äœã«åŸããŸãïŒ
- New Binding: 颿°ã
newã§åŒã³åºãããå Žåãthisã¯æ°ããäœæããããªããžã§ã¯ããåç §ããŸãã - Explicit Binding:
callãapplyããŸãã¯bindã䜿çšãããå Žåãthisã¯æç€ºçã«æå®ãããå€ã«èšå®ãããŸãã - Implicit Binding: 颿°ããªããžã§ã¯ãã®ã¡ãœãããšããŠåŒã³åºãããå Žåã
thisã¯ãã®ãªããžã§ã¯ããåç §ããŸãã - Default Binding: äžèšã®ãããã®ã«ãŒã«ãé©çšãããªãå Žåã
thisã¯ã°ããŒãã«ãªããžã§ã¯ãïŒãŸãã¯å³æ Œã¢ãŒãã§ã¯undefinedïŒãåç §ããŸãã
ã¢ããŒé¢æ°ã¯ããã®ã¬ãã·ã«ã«ãªthisã«ããããããã®ã«ãŒã«ãå®è³ªçã«ãã€ãã¹ããåšå²ã®ã¹ã³ãŒãããthisãç¶æ¿ããŸãã
äžè¬çãªãŠãŒã¹ã±ãŒã¹ãšäŸ
thisã®çè§£ã¯ãããŸããŸãªJavaScriptã®ã·ããªãªã§äžå¯æ¬ ã§ãã以äžã¯äžè¬çãªãŠãŒã¹ã±ãŒã¹ã§ãïŒ
1. ã€ãã³ããã³ãã©ãŒ
ã€ãã³ããã³ãã©ãŒïŒäŸïŒãã¿ã³ã®ã¯ãªãã¯ããã©ãŒã ã®éä¿¡ãžã®å¿çïŒã§ã¯ãthisã¯éåžžãã€ãã³ããããªã¬ãŒããDOMèŠçŽ ãåç
§ããŸãã
äŸïŒãã©ãŠã¶ïŒïŒ
<button id="myButton">Click Me</button>
<script>
const button = document.getElementById("myButton");
button.addEventListener("click", function() {
console.log(this === button); // true
this.textContent = "Clicked!"; // Change button text
});
</script>
ã€ãã³ããã³ãã©ãŒã§ã¢ããŒé¢æ°ã䜿çšãããšãã€ãã³ããããªã¬ãŒããèŠçŽ ã«ã¢ã¯ã»ã¹ããå¿
èŠãããå Žåã«åä»ãªããšããããŸãããªããªããthisããã®èŠçŽ ã«ãã€ã³ããããªãããã§ãããã®ãããªå Žåã¯ãéåžžã®é¢æ°ã䜿çšããããã€ãã³ããªããžã§ã¯ãïŒevent.targetïŒã«ã¢ã¯ã»ã¹ããæ¹ãé©åã§ãã
2. ãªããžã§ã¯ãæåããã°ã©ãã³ã°ïŒOOPïŒ
OOPã§ã¯ãthisã¯ãªããžã§ã¯ãã®ã¡ãœããå
ã§ãªããžã§ã¯ãã®ããããã£ãã¡ãœããã«ã¢ã¯ã»ã¹ããããã«äžå¯æ¬ ã§ããããã¯ãããŒã¿ãšæ¯ãèããã«ãã»ã«åããã¯ã©ã¹ããªããžã§ã¯ããäœæããããã«éèŠã§ãã
äŸïŒ
class Rectangle {
constructor(width, height) {
this.width = width;
this.height = height;
}
getArea() {
return this.width * this.height;
}
}
const myRectangle = new Rectangle(10, 5);
console.log(myRectangle.getArea()); // Output: 50
3. ã³ãŒã«ããã¯
ã³ãŒã«ããã¯ã䜿çšããéïŒäŸïŒéåææäœïŒãthisã®å€ã¯äºæž¬äžå¯èœã«ãªãããšããããŸããã¢ããŒé¢æ°ã䜿çšãããšãã¬ãã·ã«ã«ãªthisãä¿æããããšã§ã³ãŒããç°¡çŽ åã§ããŸãã
äŸïŒ
function fetchData(callback) {
// Simulate an asynchronous operation
setTimeout(() => {
const data = { message: "Data fetched successfully" };
callback(data);
}, 1000);
}
const myObject = {
name: "My Object",
processData: function() {
fetchData((data) => {
console.log(this.name + ": " + data.message); // 'this' refers to myObject
});
}
};
myObject.processData(); // Output (after 1 second): My Object: Data fetched successfully
4. ã¯ããŒãžã£ãŒ
ã¯ããŒãžã£ãŒã¯ãæãšããŠthisãšäºæãã¬åœ¢ã§çžäºäœçšããããšããããŸããã¯ããŒãžã£ãŒãthisãå«ã倿°ãã©ã®ããã«ãã£ããã£ããããçè§£ããããšãéèŠã§ãã
äŸïŒ
function createCounter() {
let count = 0;
return {
increment: function() {
count++;
console.log(count);
},
getCount: function() {
return count;
}
};
}
const counter = createCounter();
counter.increment(); // Output: 1
counter.increment(); // Output: 2
console.log(counter.getCount()); // Output: 2
èœãšã穎ãšãã¹ããã©ã¯ãã£ã¹
thisã¯æè»æ§ãæäŸããŸãããäžè¬çãªãšã©ãŒã«ã€ãªããããšããããŸãã以äžã¯é¿ããã¹ãèœãšã穎ãšåŸãã¹ããã¹ããã©ã¯ãã£ã¹ã§ãïŒ
- ã€ãã³ããã³ãã©ãŒã§ã®'this'ã®åªå€±ïŒ ã€ãã³ããªã¹ããŒã䜿çšããéã¯ã
thisãæ£ãããã€ã³ããããŠããããšã確èªããŠãã ããã.bind()ãã¢ããŒé¢æ°ã®äœ¿çšãæ€èšããããã€ãã³ãã¿ãŒã²ããã«çŽæ¥ã¢ã¯ã»ã¹ããŠãã ããã - ã³ãŒã«ããã¯ã§ã®'this'ã®æ··ä¹±ïŒ ç¹ã«éåææäœã§ã³ãŒã«ããã¯ã䜿çšããéã¯ãã³ã³ããã¹ãã«æ³šæããŠãã ãããã¢ããŒé¢æ°ã¯ãããç°¡çŽ åããããšãå€ãã§ãã
- æç€ºçãã€ã³ãã£ã³ã°ã®ä¹±çšïŒ
callãapplyãbindã¯åŒ·åã§ãããä¹±çšã¯é¿ããŠãã ãããæé»çãã€ã³ãã£ã³ã°ãã¢ããŒé¢æ°ã§ãããæç¢ºã«ç®çã®çµæãéæã§ããªããæ€èšããŠãã ããã - 峿 Œã¢ãŒãã§ã®'this'ïŒ å³æ Œã¢ãŒãã§ã¯ãã°ããŒãã«ã³ã³ããã¹ãã®
thisã¯undefinedã§ããããšãå¿ããªãã§ãã ããã - ã¬ãã·ã«ã«ãª'this'ã®çè§£ïŒ ã¢ããŒé¢æ°ã¯åšå²ã®ã¹ã³ãŒããã
thisãç¶æ¿ããããšãèªèããŠãã ãããããã¯æçãªå ŽåããããŸãããæ éãªæ€èšãå¿ èŠã§ãã
åœéçãªèæ ®äºé
ã°ããŒãã«ãªãªãŒãã£ãšã³ã¹åãã«éçºããå Žåãéçºè
ã®æåšå°ãæåçèæ¯ã«é¢ãããã容æã«ä¿å®ã»çè§£ã§ããã³ãŒããæžãããšãéèŠã§ããthisã®æç¢ºã§äžè²«ããäœ¿çšæ³ãšãå
æ¬çãªããã¥ã¡ã³ãã¯ãããªãã®ã³ãŒããäžçäžã®éçºè
ã«ãšã£ãŠã¢ã¯ã»ã¹ãããããªãã®ãå©ããŸããäžè²«ããåœåèŠåã䜿çšããé床ã«è€éãªãã¿ãŒã³ãé¿ããããšããå¯èªæ§ãåäžãããŸãã
äŸãã°ãã³ãŒããã³ã¡ã³ãã«èšèªåºæãŸãã¯æååºæã®çšèªã䜿çšããããšã¯é¿ããŠãã ãããç°ãªãããŒã ãå°åéã§ã®çžäºéçšæ§ãšååãä¿é²ããããã«ãæšæºçãªJavaScriptã®ãã©ã¯ãã£ã¹ãšæ £ç¿ã«åŸã£ãŠãã ããã
çµè«
JavaScriptã®thisããŒã¯ãŒãããã¹ã¿ãŒããããšã¯ãå
ç¢ã§ä¿å®æ§ãé«ããã¹ã±ãŒã©ãã«ãªã¢ããªã±ãŒã·ã§ã³ãæžãããã«äžå¯æ¬ ã§ããç°ãªããã€ã³ãã£ã³ã°ã«ãŒã«ãã¢ããŒé¢æ°ã®æåããããŠäžè¬çãªèœãšã穎ãçè§£ããããšã§ãå¹ççã§çè§£ããããã³ãŒããæžãåãã€ããŸãããã¹ããã©ã¯ãã£ã¹ã«åŸããã°ããŒãã«ãªã³ã³ããã¹ããèæ
®ããããšã§ãäžçäžã®éçºè
ã«ãšã£ãŠã¢ã¯ã»ã¹å¯èœã§ä¿å®ããããJavaScriptã¢ããªã±ãŒã·ã§ã³ãäœæã§ããŸãããã®çè§£ã¯ãåœéçãªç°å¢ã§ã®å¹æçãªããŒã ã¯ãŒã¯ãå¯èœã«ããŸãã
thisã®çè§£ã確åºãããã®ã«ããããã«ãããŸããŸãªã·ããªãªãäŸã§ç·Žç¿ãç¶ããŠãã ããããã®åºæ¬çãªæŠå¿µããã£ãããšææ¡ããã°ãæãè€éãªJavaScriptã®èª²é¡ã«ãååã«å¯Ÿå¿ã§ããããã«ãªãã§ãããã